<template>
    <div class="app-container backorder_page">
        <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="80px">
            <el-form-item label="中介单号" prop="orderNo">
                <el-input v-model="queryParams.orderNo" placeholder="请输入中介单号" clearable />
            </el-form-item>
            <el-form-item label="售后单号" prop="afterNo">
                <el-input v-model="queryParams.afterNo" placeholder="请输入售后单号" clearable />
            </el-form-item>
            <el-form-item label="售后状态" prop="afterStatus">
                <el-select v-model="queryParams.afterStatus" placeholder="请选择售后状态" clearable filterable>
                    <el-option label="待处理" :value="1" />
                    <el-option label="已同意" :value="2" />
                    <el-option label="已拒绝" :value="3" />
                </el-select>
            </el-form-item>
            <el-form-item label="游戏账号" prop="account">
                <el-input v-model="queryParams.account" placeholder="请输入游戏账号" clearable />
            </el-form-item>
              <el-form-item label-width="60px" label="卖家" prop="sellerId">
                <el-select class="bumen"  collapse-tags filterable clearable v-model="queryParams.sellerId"
                    placeholder="请选择卖家">
                    <el-option v-for="(item, key) in allUsers" :key="key" :label="item.nickName" :value="item.userId" />
                </el-select>
            </el-form-item>

           
            <el-form-item label="创建时间" prop="createTime">
                <el-date-picker clearable v-model="createTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item class="btns">
                <el-button type="primary" icon="el-icon-search" @click="search" class="zdy-btn">搜索</el-button>
                <el-button icon="el-icon-refresh" type="warning" plain @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        
        <div class="table_box table_box_new">
            <el-table :data="tableData.records" border stripe v-loading="loading">
                <el-table-column prop="orderNo" label="中介单号" min-width="140"></el-table-column>
                <el-table-column prop="afterNo" label="售后单号" min-width="140"></el-table-column>
                <el-table-column prop="afterStatus" label="售后状态" min-width="120">
                    <template slot-scope="scope">
                        <el-tag :type="afterStatusType(scope.row.afterStatus)">{{ afterStatusText(scope.row.afterStatus) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="account" label="游戏账号" min-width="140" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sellerNickname" label="卖家昵称" min-width="120"></el-table-column>
                <!-- <el-table-column label="包赔资料" min-width="120">
                    <template slot-scope="scope">
                        <el-button type="text" @click="openGuaranteeInfo(scope.row)">查看</el-button>
                    </template>
                </el-table-column> -->
                <el-table-column prop="compensationAmount" label="赔付金额" min-width="110">
                    <template slot-scope="scope">{{ formatMoney(scope.row.compensationAmount) }}</template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" min-width="160"></el-table-column>
                <el-table-column prop="processTime" label="处理时间" min-width="160"></el-table-column>

                <el-table-column fixed="right" label="操作" min-width="220">
                    <template slot-scope="scope">
                        <el-button type="add" @click="openViewDialog(scope.row)">查看</el-button>
                        <el-button type="text" v-if="scope.row.afterStatus == 1" @click="openAgreeDialog(scope.row)">同意</el-button>
                        <el-button type="del" v-if="scope.row.afterStatus == 1" @click="openRejectDialog(scope.row)">拒绝</el-button>
                        
                    </template>
                </el-table-column>
            </el-table>
        </div>
        
        <div class="pages-box">
            <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>

        <!-- 售后查看弹窗（ -->
        

        <!-- 售后处理弹窗（同意/拒绝） -->
        <interSalesProcessDialog ref="interSalesProcessDialogRef" @success="getList" />

      <baopeiEditDialog ref="baopeiEditDialog"></baopeiEditDialog>
      <interSalesDetail ref="interSalesDetailRef"></interSalesDetail>
    </div>
</template>

<script>
import supplyConfigApi from "@/api/system/supplyConfig";
import baopeiEditDialog from "./components/interBaopei.vue";
import interSalesDetail from "./components/interSalesDetail.vue";
import interSalesProcessDialog from "./components/interSalesProcessDialog.vue";
import { afterList } from "@/api/interOrder/index";
export default {
    name: "InterSales",
    components: { baopeiEditDialog ,interSalesDetail, interSalesProcessDialog},
    data() {
        return {
            queryParams: {
                orderNo:'',
                afterNo:'',
                afterStatus:'',
                account:'',
                sellerId:'',
                pageNum: 1,
                pageSize: 10,
            },
            tableData: { records: [], total: 0 },
            loading: false,
            
            // 查看弹窗
            viewDialogVisible: false,
            
            
            createTime:[],
            guaranteeInfo: null,
             allUsers: [],
        };
    },
    mounted() {
          this.getAllUsers()
        this.getList();
    },
    methods: {
            getAllUsers() {
            supplyConfigApi.getAllUserList().then((res) => {
                this.allUsers = res.rows || [];
            });
        },
        // 获取列表
        getList() {
            this.loading = true;
            afterList(this.addDateRange(this.queryParams,this.createTime)).then((res) => {
                this.tableData = { records: res.rows || [], total: res.total || 0 };
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            });
        },
        
        search() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        
        resetQuery() {
            this.createTime = []
            this.$refs.queryForm.resetFields();
           
            this.getList();
        },
        
        // 打开查看弹窗
        openViewDialog(row){
            this.$refs.interSalesDetailRef.open(row)
            this.processForm =row
            this.viewDialogVisible = true;
        },
        // 打开同意/拒绝弹窗
        openAgreeDialog(row){ this.$refs.interSalesProcessDialogRef.open(row, 'agree'); },
        openRejectDialog(row){ this.$refs.interSalesProcessDialogRef.open(row, 'reject'); },
        
        
        
        // 查看包赔资料
        openGuaranteeInfo(row) {
           this.$refs.baopeiEditDialog.open(row,'view');
        },
        
        // 状态文本和类型
        afterStatusText(val) {
            const map = { 1: '待处理', 2: '已同意', 3: '已拒绝' };
            return map[val] || '-';
        },
        afterStatusType(val) {
            switch(val) {
                case 1: return 'warning'; // 待处理
                case 2: return 'success'; // 已同意
                case 3: return 'danger';  // 已拒绝
                default: return 'info';
            }
        },
        formatMoney(n) {
            if (n === 0) return '0.00';
            if (!n) return '---';
            return Number(n).toFixed(2);
        }
    }
}
</script>

<style scoped lang="scss">
</style>